<template>
  <div id="water-bill">
    <div class="bill-info">
      <p class="bill-info-title">账单信息</p>
      <div class="bill-content">
        <a-row>
          <a-col span="10">
            <a-row>
              <a-col span="8">客户姓名：</a-col>
              <a-col span="16">{{ userInfo.name }}</a-col>
            </a-row>
          </a-col>
          <a-col span="10">
            <a-row>
              <a-col span="8">当前余额：</a-col>
              <a-col span="16">{{ userInfo.currentBalance }}</a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="pay-info">
      <p class="pay-info-title">付款信息</p>
      <div class="pay-content">
        <a-row class="pay-row">
          <a-col span="3">
            <p>付款方式：</p>
          </a-col>
          <a-col span="15">
            <div style="position: relative;">
              <a-radio-group v-model="type" style="width: 100%;">
                <a-row>
                  <a-col span="8">
                    <a-radio value="0">扫码</a-radio>
                  </a-col>
                  <a-col span="8">
                    <a-radio value="1">现金</a-radio>
                  </a-col>
                </a-row>
              </a-radio-group>
              <p class="pay-info-tip">
                <a-tooltip placement="top">
                  <span slot="title">第三方开发商需要新对接“一码通”的支付方式，demo程序能自动识别二维码类型为“一码通”方式</span>
                  <img src="../../assets/img/tip.png" width="30">
                </a-tooltip>
              </p>
            </div>
          </a-col>
        </a-row>
        <a-row class="pay-row">
          <a-col span="3">
            <p class="row-p">缴费金额：</p>
          </a-col>
          <a-col span="5">
            <a-input v-model="money"></a-input>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="bill-btn">
      <a-button @click="next" style="width: 18%;" type="primary"
        >下一步</a-button
      >
    </div>
  </div>
</template>

<script>
import ARow from "ant-design-vue/es/grid/Row";
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: { ACol, ARow },
  data() {
    return {
      userInfo: {
        name: "王天林",
        currentBalance: "200.00"
      },
      money: "30",
      type: "0"
    };
  },
  methods: {
    next() {
      this.$router.push("/water/scan");
    }
  }
};
</script>

<style lang="less">
#water-bill {
  margin: 40px 80px 20px 20px;

  .bill-info-title {
    font-size: 18px;
    padding: 0 0 8px 8px;
    color: #000;
    font-family: AlibabaPuHuiTiR;
  }
  .bill-content {
    font-size: 18px;
    color: #000;
    font-family: AlibabaPuHuiTiR;
    border: 1px solid #333;
    padding: 20px 60px;
  }

  .pay-info {
    margin: 25px 0;
    .pay-info-title {
      font-size: 18px;
      padding: 0 0 8px 8px;
      color: #000;
      font-family: AlibabaPuHuiTiR;
    }
    .pay-content {
      border: 1px solid #333;
      padding: 20px 60px;

      .pay-row {
        padding: 15px 0;
      }
    }
  }
}
.row-p {
  line-height: 32px;
}
.pay-info-tip {
  position: absolute;
  left: 16%;
  top: -5px;
}
.bill-btn {
  text-align: center;
  margin: 40px 0;
}
</style>
